<template>
    <div>
        <div class="demo">
            <!-- el-select组件 -->
            <el-select
                v-model="value5"
                ref="select"
                @change="changeSelect"
                :class="{ 'demo-select': isMore }"
                multiple
                placeholder="请选择"
            >
                <!--  使用v-model指令绑定选择的值到data中的value5
         使用ref属性指定选择框的引用，方便后续操作
         监听选择框变化事件，触发changeSelect方法
         根据isMore的值动态添加demo-select类
         允许多选
         未选择时的占位提示文本 -->
                <!-- el-option组件，循环生成选项 -->
                <!-- <el-option
            v-for="item in options" // 使用v-for指令遍历options数组生成选项列表
            :key="item.value" // 指定每个选项的唯一key，通常使用选项的value值
            :label="item.label" // 选项的显示文本
            :value="item.value" // 选项的实际值
            class="demo-option" // 自定义选项的类名
          ></el-option> -->
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    class="demo-option"
                ></el-option>
            </el-select>
        </div>
    </div>
</template>

<script>
import { Select, Option } from "element-ui";

export default {
    data() {
        return {
            options: [
                // 选项列表
                { value: "选项1", label: "黄金糕" },
                { value: "选项2", label: "双皮奶" },
                { value: "选项3", label: "蚵仔煎" },
                { value: "选项4", label: "龙须面" },
                {
                    value: "选项5",
                    label: "北京烤鸭北京烤鸭北京烤鸭北京烤鸭北京烤鸭",
                },
            ],
            value5: [], // 选择框的值，初始化为空数组
            isMore: false, // 是否超过显示宽度的标志，默认为false
            lala: { A: "1" },
        };
    },
    methods: {
        changeSelect() {
            this.$nextTick(() => {
                // 在下一次DOM更新周期中执行代码
                const tags = Array.from(
                    this.$refs.select.$refs.tags.children[0].childNodes
                );
                // 获取选择框中的标签元素，并转换为真正的数组
                const visibleTags = tags.filter(
                    (tag) => !tag.className.includes("leave")
                );
                // 过滤掉已移除的标签，得到可见的标签列表
                const totalWidth = visibleTags.reduce(
                    (sum, tag) => sum + tag.offsetWidth,
                    0
                );
                // 计算可见标签的总宽度

                this.isMore = totalWidth > 144; // 判断是否超过显示宽度，更新isMore的值
            });
        },
    },
    components: {
        ElSelect: Select, // 注册el-select组件
        ElOption: Option, // 注册el-option组件
    },
};
</script>

<style lang="less" rel="stylesheet/less">
.demo {
    .demo-select {
        &:after {
            content: "...";
            position: absolute;
            right: 39px;
            bottom: 5px;
        }
    }
}

.el-select__tags {
    max-width: 150px !important;
    overflow: hidden;
    white-space: nowrap;
}
</style>
